<template>
    <el-container class="home-container">
        <el-header><!-- 头部区 -->
            <!-- 头部区 -->
            <!--左  -->
            <div class="h_left">
                <div class="l_icon"></div>
                <div class="l_font">图形化流程设计工具</div>
            </div>
            <!--右  -->
            <div class="h_right">
                <div class="msg"><span class="el-icon-bell"></span></div>
                <div class="userIcon"></div>
                <div class="userName">
                    <el-dropdown @command="handleCommand" trigger="click">
                        <span class="el-dropdown-link">
                            Admin<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">个人中心</el-dropdown-item>
                            <el-dropdown-item command="b">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="388px">
                <el-menu default-active="2" class="el-menu-map" @open="handleOpen" @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>元规则构建</span>
                        </template>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">行为规则可视化编辑管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">面向任务的规则流程构建</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">基于可视化的规则流程辅助校验</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-setting"></i>
                        <span slot="title">规则管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 右侧内容主体 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
 
<script>
export default {
    methods: {
        logout() {
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
};
</script>
 
<style lang="less" scoped>
v-deep .el-menu {
    background: none;

    .el-submenu {
        .el-submenu__title {
            .el-icon-arrow-down:before {
                content: "\e791" !important;
                color: red;
            }

        }
    }

    .home-container {
        height: 100%;

        .el-header {
            background: #17244A;
            width: 100%;
            height: 80px;
            line-height: 80px;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;

            div {
                //内嵌的div样式
                display: flex;
                align-items: center; //Logo和文字上下居中

                span {
                    margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
                }
            }

            .h_left {
                width: 330px;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .l_icon {
                    width: 49px;
                    height: 40px;
                    background: url(../assets/headerIcon.png) no-repeat;
                    background-size: 100% 100%;
                }

                .l_font {
                    font-size: 30px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                }

            }

            .h_right {
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .msg {
                    width: 44px;
                    height: 44px;
                    line-height: 50px;
                    background: rgba(255, 255, 255, .1);
                    border-radius: 10px;
                    margin-right: 15px;
                    text-align: center;

                    span {
                        color: #FFFFFF;
                        font-size: 22px;
                    }
                }

                .userIcon {
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: red;
                    margin-right: 15px;
                }

                .userName {
                    font-size: 16px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #FFFFFF;

                    .el-dropdown {
                        color: #fff;
                        font-weight: bold;
                        font-size: 16px;
                    }
                }
            }

        }

        .el-aside {
            height: 100%;
            background-color: #F2F6FD;
            border-right: 1px solid #C7C7C7;



            // .el-icon-arrow-down {
            //     &:before {
            //         content: "\e791";
            //         color: red;
            //         font-size: 22px;
            //     }

            // }

        }
    }

    .el-main {
        background-color: #F2F6FD;
    }
}
</style>
